<template>
  <div class="home">
    <form>
      <div class="user">
        <label for="">请输入真实姓名：</label>
        <input type="text" placeholder="请输入真实姓名" v-model="userRequestData.name_value">
      </div>
      <div class="user">
        <label for="">请输入账号：</label>
        <input type="text" placeholder="请输入账号" v-model="userRequestData.id_value">
      </div>
      <div class="user">
        <label for="">请输入密码：</label>
        <input type="text" placeholder="请输入密码" v-model="userRequestData.pwd_value">
      </div>

<!--      <div class="user">-->
<!--        <label for="">获取验证码</label>-->
<!--        <input type="text" placeholder="获取验证码">-->
<!--      </div>-->

    </form>

    <button @click="verify_register" id="register_status">{{register_status}}</button>

<!--    弹窗提示-->
    <div class="phone_pop">{{id_pop_status}}</div>
    <div class="pwd_pop">{{pwd_pop_status}}</div>
  </div>
</template>

<script >
// import axios from "axios";
import Register from "@/assets/api/register.js";

export default {
  name:'RegisterModule',
  data(){
    return{
      // 账号密码
      userRequestData:{
        id_value:'',
        pwd_value:'',
        name_value:'',
      },
      // 账号密码验证状态
      id_pop_status:"",
      pwd_pop_status:"",
      //登录状态
      register_status: "立即注册"
    }
  },
  methods:{
    //  注册验证
    verify_register() {
      if (this.userRequestData.id_value.length >= 1) {
        this.id_pop_status = " "  //账号状态置空
        //验证密码
        if (this.userRequestData.pwd_value.length >= 1) {
          this.pwd_pop_status = " "  //密码状态置空
          //与服务器交互，验证登录……
          this.registerRequest();
        } else {
          console.log("密码位数不足!")
          this.pwd_pop_status = "密码位数不足!"
        }
      } else {
        console.log("账号位数不足!")
        this.id_pop_status = "账号位数不足!"
      }
    },
    // 正则验证手机号格式
    // isPhoneNumber(phone){
    //   return /^1[3-9]\d{9}$/.test(phone)
    // },
    // 正则验证密码为字母+数字  6-12位
    // isPassword(str){
    //   return /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,12}$/.test(str)
    // },




    //注册请求
    registerRequest(){
      this.login_status = "注册中…";
      let currentTime = this.getFormattedDateTime();
      let register_time = currentTime    //注册时间
      let recently = currentTime    //最近登录时间
      Register.register_request(this.userRequestData.id_value,this.userRequestData.pwd_value,this.userRequestData.name_value, register_time,recently).then((data) => {
        console.log('注册回传信息：',data)
        if(data.success){
          //注册成功
          document.getElementById('register_status').style.color = '#00ff00'
          this.register_status = '注册成功！'
          //跳转
          setTimeout(()=>{
            this.router_push_login() 
          },1500)
        }else{
          //注册失败
          this.register_status = data.message
          this.id_pop_status = data.message
          setTimeout(()=>{
            this.register_status = "立即注册"
            this.id_pop_status = ''
          },1500)
        }
      })
    },

    // 跳转登录页面
    router_push_login() {
      this.$router.push('/login')
    },
    //获取当前系统时间
    getFormattedDateTime(){
      const d = new Date();
      let now_time =  `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2,'0')}-${d.getDate().toString().padStart(2,'0')} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}:${d.getSeconds().toString().padStart(2,'0')}`;
      // console.log('时间：',now_time)
      return now_time
    },




  },

}
</script>

<style scoped>
  .home{
    width: 100%;
    height: 100%;
    /* background-color: #b6b696; */
  }
  .user{
    width: 350px;
    height: 40px;
    //background-color: yellow;
    position: relative;
    top: 20px;
    left: calc(50% - 175px);
    margin-bottom: 5px;
  }
  label{
    display: block;
    width: 130px;
    height: 100%;
    //background-color: red;
    text-align: left;
    line-height: 40px;
    float: left;
    color:white;
    font-weight: bolder;
  }
  input{
    width: 200px;
    height: 30px;
    position: relative;
    top: 3px;
    left: 0px;
    border-radius: 7px;
    border: none;
    outline: none;
    color: rgb(216, 105, 14);
    padding-left: 10px;
  }

  button{
    background-color: rgb(195, 202, 197);
    width: 100px;
    height: 30px;
    position: relative;
    top: 30px;
    left: calc(50% - 50px);
    border-radius: 10px;
    /* border: 1px solid rgb(35, 218, 44); */
    box-sizing: border-box;
    box-shadow: 0 0 5px 3px black;
    font-weight: bolder;
    color: rgb(78, 77, 53);
    overflow: hidden;
  }
  button:hover{
    font-size: 1vw;
    font-weight: bolder;
    color: rgb(50, 205, 97);
    border: 1px solid rgb(13, 50, 218);
  }
  button:active{
    background-color: greenyellow;
    color: black;
  }



  .phone_pop{
    width: 300px;
    height: 20px;
    //background-color: red;
    position: relative;
    top: -70px;
    left: 210px;
    font-size: 10px;
    text-align: left;
    color: red;
  }
  .pwd_pop{
    width: 300px;
    height: 20px;
    //background-color: red;
    position: relative;
    top: -45px;
    left: 210px;
    font-size: 10px;
    text-align: left;
    color: red;
  }

</style>